<template>
  <div v-if="getterCurrentQuestion">
    <h4 class="h4_title">
      {{ index + 1 }}# {{ getterCurrentQuestion.title }}
      <i class="el-icon-question" @click="showTips"></i>
    </h4>
    <el-checkbox-group v-model="userAnswers">
      <template
        v-for="(option, index) in JSON.parse(getterCurrentQuestion.options)"
      >
        <el-checkbox :key="index" :label=" getLetterBindexyIndex(index)">
          {{ getLetterBindexyIndex(index) }} ) {{ option.value }}
        </el-checkbox>
        <br :key="'br' + index" />
      </template>
    </el-checkbox-group>
    <el-button-group>
      <el-button
        type="success"
        size="small"
        icon="el-icon-arrow-left"
        :disabled="index==0"
        @click="prev"
        >上一页</el-button
      >
      <el-button type="success" size="small" @click="next" :disabled="index==randomQuestion.length-1"
        >下一页<i class="el-icon-arrow-right el-icon--right"></i
      ></el-button>
    </el-button-group>
    <!-- 抽屉 -->
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <!-- {{getterCurrentQuestion.tips}} -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="答案提示:">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="getterCurrentQuestion.tips"
          >
          </el-input>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters,mapMutations } from "vuex";
export default {
  data() {
    return {
      userAnswers: [],
      drawer: false,
      form: {},
    };
  },
  fetch() {
    this.randomQuestionDataFn();
  },
  computed: {
    ...mapState("question", ["index","randomQuestion"]),
    ...mapGetters("question", ["getterCurrentQuestion"]),
  },
  methods: {
    ...mapMutations("question",["SET_INDEX"]),
    ...mapActions("question", ["randomQuestionDataFn"]),
    prev(){//上一页
      this.SET_INDEX(this.index-1)
    },
    next(){//下一页
      this.SET_INDEX(this.index+1)
    },
    showTips() {// 显示提示
      this.drawer = true;
    },
    getLetterBindexyIndex(index) {
      // console.log(index);
      //通过字母拿到索引
      return String.fromCharCode("A".charCodeAt(0) + index); //charCodeAt(0) A得charCodeAt  65  fromCharCode from(从哪里来)Char(字符)Code(码)
    },
  },
};
</script>

<style scoped>
.el-checkbox-group .el-checkbox {
  margin-bottom: 15px;
}
.h4_title {
  margin-bottom: 20px;
}
h4 .el-icon-question {
  cursor: pointer;
}
button.el-button.el-button--success.el-button--small {
  margin-right: 8px;
}
.el-form {
  width: 80%;
  margin: 40px 0 0 20px;
}
</style>